<template>
	<div class="searchFIlm">
		<div class="subtitle">
			<div class="subtitleContent">
				<router-link to="searchActor">演员</router-link>
				<router-link to="searchFilmName">片名</router-link>
				<router-link to="searchCast">角色</router-link>
			</div>
			<div class="searchBox">
				<img src="../../../../assets/images/movieClips/9/search_main_input_et_icon.png" alt="" />
				<input type="text" placeholder="请输入查询关键字"/>
				<div class="searchBtn">搜索</div>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style scoped lang="less">
@current:100rem;
.searchFIlm{
	.anthology{
		margin-top: 10/@current;
	}
	.subtitle{
		background-color: #F9F7FC;
		border-bottom: 1/@current solid #E2DEEA;
    	width: 100%;
    	box-sizing: border-box;
    	padding: 18/@current 20/@current 0 20/@current;
    	.subtitleContent{
    		width: 100%;
    		height: 60/@current;
    	    border: 2px solid #A54BE8;
    	    border-radius: 12/@current;
    	    display: flex;
    	    a{
    	    	flex: 1;
    	    	font-size: 26/@current;
    	    	color: #A54BE8;
    	    	text-align: center;
    	    	line-height: 60/@current;
    	    }
    	    a:nth-child(2){
    	    	border-left: 2px solid #A54BE8;
    	    	border-right: 2px solid #A54BE8;
    	    }
    	    .active{
    	    	color: white;
    	    	background-color: #A54BE8;
    	    }
    	}
    	.searchBox{
    		position: relative;
    		overflow: hidden;
    		margin: 20/@current 0;
    		img{
    			width: 30/@current;
    			height: 28/@current;
    			position: absolute;
    			left: 13/@current;
    			top: 15/@current;
    			float: left;
    		}
    		input{
    			outline: none;
    			border: transparent;
    			box-sizing: border-box;
    			border-radius: 10/@current;
    			padding: 20/@current 0 20/@current 50/@current;
    			font-size: 26/@current;
    			width: 490/@current;
    			height: 60/@current;
    			color: #c8c5ce;
    			float: left;
    		}
    		.searchBtn{
    			font-size: 30/@current;
    			color: #c08cee;
    			float: left;
    			margin-left: 35/@current;
    			margin-top: 9/@current;
    		}
    	}
    }
}
	
</style>